<template>
  <svg :style="{ width: size, height: size }">
    <use :xlink:href="name" :fill="svg.color"></use>
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Svg {
  name: string
  size: string
  color: string
}
const svg = defineProps<Svg>()
const size = computed(() => svg.size + 'px')
const name = '#icon-' + svg.name
</script>

<style scoped></style>
